<template>
  <div class="app-container calendar-list-container">

    <!-- 查询-->
    <el-card>
      <div class="block">
        <span style="color:gray; font-size:16px"> 对账时间:   </span>
        <el-date-picker
          type="datetimerange"
          v-model="ReconciliationsQuery.timeInterval"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '00:00:00']"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          align="right">
        </el-date-picker>
        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList(1)">检索</el-button>
      </div>
    </el-card>
    <div style="margin-bottom: 10px"></div>

    <!-- 查询结果 -->
    <el-table size="small"
              :data="list"
              v-loading.body="listLoading"
              id="reconChannelTable"
              element-loading-text="加载中"
              border
              fit
              highlight-current-row
              :default-sort="{prop: 'createDate', order: 'descending'}">

      <el-table-column align="center"
                       min-width="100"
                       label="帐单日期"
                       prop="tradeDate"
                       :formatter="dateFormat">
      </el-table-column>

      <el-table-column align="center"
                       label="对账日期"
                      prop="accountDate"
                       :formatter="dateFormat">
      </el-table-column>

      <el-table-column label="金额（元）" align="center">
        <el-table-column align="center"
                         label="平台"
                         prop="platFee">
        </el-table-column>
        <el-table-column align="center"
                         label="机构"
                         prop="orgFee">
        </el-table-column>

      </el-table-column>
      <!--<el-table-column label="笔数（元）" align="center">-->
        <!--<el-table-column align="center"-->
                         <!--label="平台"-->
                         <!--prop="totalPlatModeCount">-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center"-->
                         <!--label="机构"-->
                         <!--prop="totalOrgModeCount" >-->
        <!--</el-table-column>-->
          <!--<el-table-column align="center"-->
                           <!--label="异常">-->
            <!--<template slot-scope="scope">-->
              <!--<div>{{scope.row.totalPlatModeCount == scope.row.totalOrgModeCount ? "正常" : "异常"}}</div>-->
            <!--</template>-->
        <!--</el-table-column>-->
      <!--</el-table-column>-->
      <el-table-column align="center"
                       label="结果">
        <template slot-scope="scope">
          <div>{{ scope.row.platFee == scope.row.orgFee ? "正常" : "异常"}}</div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="tablePage.page"
                     :page-sizes="[10,20,30,50]"
                     :page-size="tablePage.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tablePage.total">
      </el-pagination>
    </div>

  </div>
</template>


<script>
  import { getDetail } from '@/api/Reconciliations'
  import { pageParamNames } from '@/utils/constants'

  export default {
    name: 'ReconciliationsDetail',
    data() {
      return {
        list: null,
        listLoading: false,
        ReconciliationsQuery: {
          timeInterval: [new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000, new Date(new Date().setHours(0, 0, 0, 0)-1)],
          orgId: this.orgId
        },
        tablePage: {
          current: null,
          pages: null,
          size: null,
          total: null
        },
        pickerOptions: {

          shortcuts: [{
            text: '前天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)* 2
              picker.$emit('pick', [start, end])
            }
          },
            {
              text: '昨天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }]
        }
      }
    },
    created() {
    this.getList(1)
  },
  methods: {
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return date.replace('T', ' ').substr(0, 19)
    },
    getList(current) {
      if (current) {
        this.tablePage.current = current
      }
       this.listLoading = true
       getDetail(this.ReconciliationsQuery, this.tablePage).then(res => {
         this.list = res.data.page.records
      this.listLoading = false
      pageParamNames.forEach(name => this.$set(this.tablePage, name, res.data.page[name]))
    })
    },
    handleSizeChange(val) {
      this.tablePage.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.tablePage.current = val
      this.getList()
    }
  }
  }
</script>
